<template>
  <scroll-view
    scroll-y
    @scrolltolower="onScrolltolower"
    class="container"
    :style="{ paddingBottom: safeAreaInsets?.bottom + 'px' }"
  >
    <view class="content" v-if="showComment">
      <view class="comment" v-for="(item, index) in data" :key="index">
        <view class="comment-content" @tap="toDetail(item)">
          <view class="content">
            {{ item.content }}
          </view>
        </view>
        <view class="comment-image" v-if="item.media_urls">
          <image
            v-for="(img, ind) in item.media_urls"
            :key="index"
            :src="img"
            mode="scaleToFill"
            @tap="previewImage(item.media_urls, ind)"
          />
        </view>
        <view class="comment-time"
          >{{
            item.is_online == 1
              ? "发布时间：" + formatDateTime(item.createTime)
              : "审核中..."
          }}
        </view>
      </view>
    </view>
    <view v-else>暂无评论</view>
    <uni-load-more v-show="data.length" :status="statusMore" />
  </scroll-view>
</template>

<script lang="ts" setup>
import { getUserCommentAPI } from "@/services";
import { formatDateTime } from "@/utils/time";
import { onLoad } from "@dcloudio/uni-app";
import { reactive, ref } from "vue";
// 获取屏幕边界到安全区域距离
const { safeAreaInsets } = uni.getSystemInfoSync();
let statusMore = ref<UniHelper.UniLoadMoreStatus>("more");
let showComment = ref(false);
onLoad((options: any) => {
  let { userId } = options;
  if (!userId) {
    uni.navigateBack();
    uni.showToast({
      title: "请先登录",
      icon: "error",
    });
  } else {
    user_id.value = userId;
    getCommentList(userId);
  }
});
let user_id = ref("");
let data = reactive<any>([]);

const previewImage = (url: string[], index: number) => {
  uni.previewImage({
    urls: url,
    current: index,
    showmenu: true,
  });
};
let pageParams = {
  page: 1,
  limit: 10,
};
const getCommentList = async (usreId: string) => {
  let result: any = await getUserCommentAPI({
    userId: usreId,
    page: 1,
    limit: pageParams.limit,
  });
  if (result.code == 200) {
    data = result.data;
    console.log(result.pages);
    if (pageParams.page < result.pages) {
      pageParams.page++;
      statusMore.value = "more";
    } else {
      statusMore.value = "noMore";
    }
    showComment.value = true;
  } else {
    uni.showToast({
      title: "暂无数据",
      icon: "none",
    });
  }
};

const toDetail = (item: any) => {
  let type = item.food_id ? "food" : "travel";
  uni.navigateTo({
    url: `/pages/detail/detail?id=${
      item.food_id || item.travel_id
    }&type=${type}`,
  });
};

const onScrolltolower = async () => {
  if (statusMore.value == "noMore") {
    return uni.showToast({
      title: "没有更多数据了",
      icon: "error" || "fail",
    });
  }
  statusMore.value = "loading";
  let result: any = await getUserCommentAPI({
    userId: user_id.value,
    page: pageParams.page,
    limit: pageParams.limit,
  });
  if (result.code == 200) {
    data.push(...result.data);
    if (pageParams.page < result.pages) {
      pageParams.page++;
      statusMore.value = "more";
    } else {
      statusMore.value = "noMore";
    }
  } else {
    uni.showToast({
      title: "暂无数据",
      icon: "none",
    });
  }
};
</script>

<style lang="scss" scoped>
$fontSize: 24rpx;
$imgSize: 220rpx;
.container {
  height: calc(100vh - var(--window-top));
  margin-bottom: 20rpx;
  .content {
    .comment {
      margin: 10rpx 20rpx 0rpx 20rpx;
      background-color: white;
      border-radius: 30rpx;
      padding: 10rpx;
      .comment-content {
        font-size: calc($fontSize * 1.1);
        line-height: 1.5;
        padding: 10rpx;
        text-indent: 2em;
      }
      .comment-image {
        margin-top: 10rpx;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        image {
          width: calc(98% / 3);
          height: $imgSize;
          border-radius: 5%;
          margin: 5rpx 0;
          box-sizing: border-box;
        }
      }
      .comment-time {
        text-align: right;
        font-size: calc($fontSize * 0.8);
        padding: 10rpx;
      }
    }
  }
}
</style>
